<template>
  <div class="main">
    <a-layout class="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <div class="logo" />
        <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1">
            nav 1
          </a-menu-item>
          <a-menu-item key="2">
            nav 2
          </a-menu-item>
          <a-menu-item key="3">
            nav 3
          </a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout>
        <a-layout-sider
          width="200"
          style="background: #fff"
          v-model="collapsed"
          collapsible
        >
          <a-menu
            mode="inline"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            :style="{ height: '100%', borderRight: 0 }"
            :inline-collapsed="collapsed"
            theme="dark"
          >
            <a-sub-menu key="sub1">
              <span slot="title"
                ><a-icon type="mail" /><span>Navigation One</span></span
              >
              <a-menu-item key="1">
                Option 5
              </a-menu-item>
            </a-sub-menu>
            <a-menu-item key="2">
              <a-icon type="pie-chart" />
              <span>Option 1</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-space style="margin: 5px;">
            <a-button>
              width change
            </a-button>
            <a-button @click="handleSizeBtn('height')">
              height change
            </a-button>
          </a-space>
          <a-layout-content>
            <drawer ref="drawerRef">
              <!-- left-area -->
              <drawer-item
                item-pos="left"
                :width="itemWidth.left"
                :visible="false"
              >
                <template v-slot:button="props">
                  <div class="fold-btn my-column-btn">
                    <a-icon
                      :type="props.fold ? 'vertical-right' : 'vertical-left'"
                    />
                  </div>
                </template>
                <template #content>
                  <left-area />
                </template>
              </drawer-item>
              <!-- center-area -->
              <drawer-item item-pos="center">
                <drawer-item item-pos="center"></drawer-item>
                <drawer-item item-pos="bottom" :height="200">
                  <template v-slot:button="props">
                    <div class="fold-btn my-row-btn">
                      <a-icon :type="props.fold ? 'down' : 'up'" />
                    </div>
                  </template>
                  <template #content>
                    <bottom-area />
                  </template>
                </drawer-item>
              </drawer-item>
              <!-- right-area -->
              <drawer-item item-pos="right" :width="itemWidth.right">
                <template v-slot:button="props">
                  <div class="fold-btn my-column-btn">
                    <a-icon
                      :type="props.fold ? 'vertical-left' : 'vertical-right'"
                    />
                  </div>
                </template>
                <template #content>
                  <left-area />
                </template>
              </drawer-item>
            </drawer>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import drawer from "./components/drawer";
import drawerItem from "./components/drawer-item";
import leftArea from "./components/left-area";
import bottomArea from "./components/bottom-area";

export default {
  name: "App",
  components: {
    drawer,
    drawerItem,
    leftArea,
    bottomArea,
  },
  data() {
    return {
      itemWidth: { left: 200, right: 200, center: 0 },
      sizeChange: { state: false, delay: 0 },

      collapsed: false,
    };
  },
  watch: {
    collapsed() {
      this.sizeChange = {
        state: true,
        delay: 500,
      };
    },
  },
  methods: {
    handleSizeBtn(type) {
      if (type === "height") {
        const h = this.$refs.drawerRef.clientHeight;
        this.$refs.drawerRef.clientHeight = h * 0.8;
        this.sizeChange = { state: true, delay: 0 };
      }
    },
  },
};
</script>

<style lang="less" scoped>
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
.main {
  width: 100%;
  height: 100%;
  position: absolute;
  /deep/ .components-layout-demo-top-side-2 {
    height: 100%;
  }
  .fold-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white !important;
    font-size: 15px;
  }
  .my-column-btn {
    width: 10px;
    height: 100%;
  }
  .my-row-btn {
    width: 100%;
    height: 10px;
  }
}
</style>
